<template>
  <div class="ai-content-detection">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>AI生成内容识别</h1>
      <p>使用前沿技术识别AI生成的图像、视频、文本和音频内容</p>
    </div>

    <!-- 功能概览 -->
    <div class="overview-section">
      <div class="overview-grid">
        <div class="overview-card">
          <div class="overview-icon">🖼️</div>
          <h3>图像检测</h3>
          <p>识别由GAN、Diffusion等AI模型生成的图像</p>
          <div class="overview-stats">
            <span class="stat-label">准确率：</span>
            <span class="stat-value">96.5%</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="overview-icon">🎥</div>
          <h3>视频检测</h3>
          <p>检测Deepfake和AI生成的视频内容</p>
          <div class="overview-stats">
            <span class="stat-label">准确率：</span>
            <span class="stat-value">94.2%</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="overview-icon">📝</div>
          <h3>文本检测</h3>
          <p>识别ChatGPT等大语言模型生成的文本</p>
          <div class="overview-stats">
            <span class="stat-label">准确率：</span>
            <span class="stat-value">89.8%</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="overview-icon">🎵</div>
          <h3>音频检测</h3>
          <p>识别AI语音合成和语音克隆内容</p>
          <div class="overview-stats">
            <span class="stat-label">准确率：</span>
            <span class="stat-value">92.3%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速检测 -->
    <div class="quick-detection-section">
      <h2>快速检测</h2>
      <div class="detection-tabs">
        <button 
          v-for="tab in detectionTabs" 
          :key="tab.id"
          class="tab-btn"
          :class="{ active: activeTab === tab.id }"
          @click="switchTab(tab.id)"
        >
          {{ tab.icon }} {{ tab.label }}
        </button>
      </div>
      
      <div class="detection-content">
        <div v-if="activeTab === 'image'" class="detection-panel">
          <div class="model-selector">
            <h3>选择检测模型</h3>
            <div class="model-options">
              <div 
                v-for="model in imageModels" 
                :key="model.id"
                class="model-option"
                :class="{ active: selectedImageModel === model.id }"
                @click="selectedImageModel = model.id"
              >
                <div class="model-header">
                  <span class="model-name">{{ model.name }}</span>
                  <div class="model-stats">
                    <span class="accuracy">{{ model.accuracy }}</span>
                    <span class="speed">{{ model.speed }}</span>
                  </div>
                </div>
                <p class="model-description">{{ model.description }}</p>
              </div>
            </div>
          </div>
          
          <div class="upload-area" @dragover.prevent @drop="handleImageDrop">
            <div class="upload-icon">📷</div>
            <p>拖拽图片到这里或点击上传</p>
            <input 
              ref="imageInput" 
              type="file" 
              accept="image/*" 
              @change="handleImageUpload"
              style="display: none;"
            />
            <button class="upload-btn" @click="$refs.imageInput.click()">
              选择图片
            </button>
          </div>
          
          <!-- 检测按钮 -->
          <div v-if="imagePreview && !isDetecting" class="detection-controls">
            <button class="detect-btn" @click="startImageDetection">
              🔍 开始检测
            </button>
          </div>
          
          <div v-if="imagePreview" class="preview-section">
            <img :src="imagePreview" alt="预览图片" class="preview-image" />
            <div class="detection-result">
              <div class="result-header">
                <div class="result-title-section">
                  <h3>检测结果</h3>
                  <div class="result-conclusion">
                    <span class="conclusion-badge" :class="imageResult?.result === 'AI生成' ? 'ai-generated' : 'human-created'">
                      {{ imageResult?.result || '--' }}
                    </span>
                  </div>
                </div>
                <div class="confidence-score">
                  <span class="score-label">置信度：</span>
                  <span class="score-value" :class="getConfidenceClass(imageResult?.confidence || 0)">
                    {{ imageResult?.confidence || '--' }}%
                  </span>
                </div>
              </div>
              <div class="result-details">
                <div class="detail-item">
                  <span class="label">检测模型：</span>
                  <span class="value">{{ imageResult?.model || '--' }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">处理时间：</span>
                  <span class="value">{{ imageResult?.processingTime || '--' }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">文件大小：</span>
                  <span class="value">{{ imageResult?.fileSize || '--' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div v-if="activeTab === 'text'" class="detection-panel">
          <div class="model-selector">
            <h3>选择检测模型</h3>
            <div class="model-options">
              <div 
                v-for="model in textModels" 
                :key="model.id"
                class="model-option"
                :class="{ active: selectedTextModel === model.id }"
                @click="selectedTextModel = model.id"
              >
                <div class="model-header">
                  <span class="model-name">{{ model.name }}</span>
                  <div class="model-stats">
                    <span class="accuracy">{{ model.accuracy }}</span>
                    <span class="speed">{{ model.speed }}</span>
                  </div>
                </div>
                <p class="model-description">{{ model.description }}</p>
              </div>
            </div>
          </div>
          
          <div class="text-input-area">
            <textarea 
              v-model="textContent"
              placeholder="请输入需要检测的文本内容..."
              class="text-input"
            ></textarea>
            <div class="text-stats">
              <span>字符数：{{ textContent.length }}</span>
              <span>词数：{{ getWordCount(textContent) }}</span>
            </div>
          </div>
          
          <!-- 检测按钮 -->
          <div v-if="textContent.trim().length > 0 && !isDetecting" class="detection-controls">
            <button class="detect-btn" @click="startTextDetection">
              🔍 开始检测
            </button>
          </div>
          
          <div v-if="textResult" class="text-result">
                          <div class="result-header">
                <div class="result-title-section">
                  <h3>检测结果</h3>
                  <div class="result-conclusion">
                    <span class="conclusion-badge" :class="textResult?.result === 'AI生成' ? 'ai-generated' : 'human-created'">
                      {{ textResult?.result || '--' }}
                    </span>
                  </div>
                </div>
                <div class="confidence-score">
                  <span class="score-label">置信度：</span>
                  <span class="score-value" :class="getConfidenceClass(textResult?.confidence || 0)">
                    {{ textResult?.confidence || '--' }}%
                  </span>
                </div>
              </div>
            <div class="result-details">
              <div class="detail-item">
                <span class="label">检测模型：</span>
                <span class="value">{{ textResult?.model || '--' }}</span>
              </div>
              <div class="detail-item">
                <span class="label">语言风格：</span>
                <span class="value">{{ textResult?.style || '--' }}</span>
              </div>
              <div class="detail-item">
                <span class="label">复杂度：</span>
                <span class="value">{{ textResult?.complexity || '--' }}</span>
              </div>
              <div class="detail-item">
                <span class="label">创造性：</span>
                <span class="value">{{ textResult?.creativity || '--' }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <div v-if="activeTab === 'audio'" class="detection-panel">
          <div class="model-selector">
            <h3>选择检测模型</h3>
            <div class="model-options">
              <div 
                v-for="model in audioModels" 
                :key="model.id"
                class="model-option"
                :class="{ active: selectedAudioModel === model.id }"
                @click="selectedAudioModel = model.id"
              >
                <div class="model-header">
                  <span class="model-name">{{ model.name }}</span>
                  <div class="model-stats">
                    <span class="accuracy">{{ model.accuracy }}</span>
                    <span class="speed">{{ model.speed }}</span>
                  </div>
                </div>
                <p class="model-description">{{ model.description }}</p>
              </div>
            </div>
          </div>
          
          <div class="audio-upload-area">
            <div class="upload-icon">🎤</div>
            <p>上传音频文件进行检测</p>
            <input 
              ref="audioInput" 
              type="file" 
              accept="audio/*" 
              @change="handleAudioUpload"
              style="display: none;"
            />
            <button class="upload-btn" @click="$refs.audioInput.click()">
              选择音频
            </button>
          </div>
          
          <!-- 检测按钮 -->
          <div v-if="audioFile && !isDetecting" class="detection-controls">
            <button class="detect-btn" @click="startAudioDetection">
              🔍 开始检测
            </button>
          </div>
          
          <div v-if="audioFile" class="audio-preview">
            <audio :src="audioPreview" controls class="audio-player"></audio>
            <div class="audio-info">
              <p>文件名：{{ audioFile.name }}</p>
              <p>大小：{{ formatFileSize(audioFile.size) }}</p>
              <p>时长：{{ audioDuration }}</p>
            </div>
            
            <div v-if="audioResult" class="audio-result">
              <div class="result-header">
                <div class="result-title-section">
                  <h3>检测结果</h3>
                  <div class="result-conclusion">
                    <span class="conclusion-badge" :class="audioResult?.result === 'AI生成' ? 'ai-generated' : 'human-created'">
                      {{ audioResult?.result || '--' }}
                    </span>
                  </div>
                </div>
                <div class="confidence-score">
                  <span class="score-label">置信度：</span>
                  <span class="score-value" :class="getConfidenceClass(audioResult?.confidence || 0)">
                    {{ audioResult?.confidence || '--' }}%
                  </span>
                </div>
              </div>
              <div class="result-details">
                <div class="detail-item">
                  <span class="label">检测模型：</span>
                  <span class="value">{{ audioResult?.model || '--' }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">处理时间：</span>
                  <span class="value">{{ audioResult?.processingTime || '--' }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">语音类型：</span>
                  <span class="value">{{ audioResult?.voiceType || '--' }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">音质评分：</span>
                  <span class="value">{{ audioResult?.quality || '--' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div v-if="activeTab === 'video'" class="detection-panel">
          <div class="model-selector">
            <h3>选择检测模型</h3>
            <div class="model-options">
              <div 
                v-for="model in videoModels" 
                :key="model.id"
                class="model-option"
                :class="{ active: selectedVideoModel === model.id }"
                @click="selectedVideoModel = model.id"
              >
                <div class="model-header">
                  <span class="model-name">{{ model.name }}</span>
                  <div class="model-stats">
                    <span class="accuracy">{{ model.accuracy }}</span>
                    <span class="speed">{{ model.speed }}</span>
                  </div>
                </div>
                <p class="model-description">{{ model.description }}</p>
              </div>
            </div>
          </div>
          
          <div class="video-upload-area">
            <div class="upload-icon">🎥</div>
            <p>上传视频文件进行检测</p>
            <p class="upload-hint">支持 MP4, AVI, MOV 格式，最大 100MB</p>
            <input 
              ref="videoInput" 
              type="file" 
              accept="video/*" 
              @change="handleVideoUpload"
              style="display: none;"
            />
            <button class="upload-btn" @click="$refs.videoInput.click()">
              选择视频
            </button>
          </div>
          
          <!-- 检测按钮 -->
          <div v-if="videoFile && !isDetecting" class="detection-controls">
            <button class="detect-btn" @click="startVideoDetection">
              🔍 开始检测
            </button>
          </div>
          
          <div v-if="videoFile" class="video-preview">
            <video :src="videoPreview" controls class="video-player"></video>
            <div class="video-info">
              <p>文件名：{{ videoFile.name }}</p>
              <p>大小：{{ formatFileSize(videoFile.size) }}</p>
              <p>时长：{{ videoDuration }}</p>
            </div>
            
            <div v-if="videoResult" class="video-result">
              <div class="result-header">
                <div class="result-title-section">
                  <h3>检测结果</h3>
                  <div class="result-conclusion">
                    <span class="conclusion-badge" :class="videoResult?.result === 'AI生成' ? 'ai-generated' : 'human-created'">
                      {{ videoResult?.result || '--' }}
                    </span>
                  </div>
                </div>
                <div class="confidence-score">
                  <span class="score-label">置信度：</span>
                  <span class="score-value" :class="getConfidenceClass(videoResult?.confidence || 0)">
                    {{ videoResult?.confidence || '--' }}%
                  </span>
                </div>
              </div>
              <div class="result-details">
                <div class="detail-item">
                  <span class="label">检测模型：</span>
                  <span class="value">{{ videoResult?.model || '--' }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">处理时间：</span>
                  <span class="value">{{ videoResult?.processingTime || '--' }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">分析帧数：</span>
                  <span class="value">{{ videoResult?.framesAnalyzed || '--' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 检测进度 -->
      <div v-if="isDetecting" class="detection-progress">
        <div class="progress-header">
          <h4>{{ currentDetectionStep }}</h4>
          <span class="progress-percentage">{{ detectionProgress }}%</span>
        </div>
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: detectionProgress + '%' }"></div>
        </div>
        <div class="progress-steps">
          <div 
            v-for="(step, index) in detectionSteps" 
            :key="step.id"
            class="step-item"
            :class="{ 
              'completed': index < Math.floor(detectionProgress / (100 / detectionSteps.length)), 
              'active': index === Math.floor(detectionProgress / (100 / detectionSteps.length)),
              'pending': index > Math.floor(detectionProgress / (100 / detectionSteps.length))
            }"
          >
            <div class="step-indicator">
              <svg v-if="index < Math.floor(detectionProgress / (100 / detectionSteps.length))" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 12l2 2 4-4"/>
              </svg>
              <div v-else-if="index === Math.floor(detectionProgress / (100 / detectionSteps.length))" class="step-spinner"></div>
              <div v-else class="step-dot"></div>
            </div>
            <div class="step-info">
              <span class="step-name">{{ step.name }}</span>
              <span class="step-desc">{{ step.description }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 检测统计 -->
    <div class="statistics-section">
      <h2>检测统计</h2>
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon">🔍</div>
          <div class="stat-content">
            <h3>{{ totalDetections }}</h3>
            <p>总检测次数</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">🤖</div>
          <div class="stat-content">
            <h3>{{ aiDetectedCount }}</h3>
            <p>AI生成内容</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">👤</div>
          <div class="stat-content">
            <h3>{{ humanCreatedCount }}</h3>
            <p>人类创作内容</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">📊</div>
          <div class="stat-content">
            <h3>{{ averageAccuracy }}%</h3>
            <p>平均准确率</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新检测记录 -->
    <div class="recent-detections-section">
      <h2>最新检测记录</h2>
      <div class="detections-table">
        <div class="table-header">
          <span>时间</span>
          <span>类型</span>
          <span>内容</span>
          <span>结果</span>
          <span>置信度</span>
          <span>操作</span>
        </div>
        
        <div 
          v-for="detection in filteredRecentDetections" 
          :key="detection.id"
          class="table-row"
        >
          <span class="time">{{ detection.time || '--' }}</span>
          <span class="type">
            <span class="type-badge" :class="detection.type">
              {{ getTypeLabel(detection.type) }}
            </span>
          </span>
          <span class="content">{{ detection.content || '--' }}</span>
          <span class="result">
            <span class="result-badge" :class="detection.result">
              {{ getResultLabel(detection.result) }}
            </span>
          </span>
          <span class="confidence">{{ detection.confidence != null ? detection.confidence : '--' }}%</span>
          <span class="actions">
            <button class="action-btn" @click="viewDetection(detection)">
              查看
            </button>
          </span>
        </div>
      </div>
    </div>

    <!-- 技术说明 -->
    <div class="technology-section">
      <h2>技术说明</h2>
      <div class="tech-grid">
        <div class="tech-card">
          <div class="tech-icon">🧠</div>
          <h3>深度学习模型</h3>
          <p>基于最新的深度学习技术，包括CNN、RNN、Transformer等架构</p>
        </div>
        
        <div class="tech-card">
          <div class="tech-icon">🔬</div>
          <h3>多模态分析</h3>
          <p>结合图像、文本、音频等多种特征进行综合分析判断</p>
        </div>
        
        <div class="tech-card">
          <div class="tech-icon">⚡</div>
          <h3>实时检测</h3>
          <p>优化的模型架构和算法，支持实时快速检测</p>
        </div>
        
        <div class="tech-card">
          <div class="tech-icon">🎯</div>
          <h3>高准确率</h3>
          <p>经过大量数据训练，在各类AI生成内容检测中达到高准确率</p>
        </div>
      </div>
    </div>

    <!-- 使用指南 -->
    <div class="guide-section">
      <h2>使用指南</h2>
      <div class="guide-content">
        <div class="guide-step">
          <div class="step-number">1</div>
          <div class="step-content">
            <h3>选择检测类型</h3>
            <p>根据您要检测的内容选择对应的检测类型（图像、视频、文本、音频）</p>
          </div>
        </div>
        
        <div class="guide-step">
          <div class="step-number">2</div>
          <div class="step-content">
            <h3>上传或输入内容</h3>
            <p>上传文件或输入文本内容，系统将自动开始分析</p>
          </div>
        </div>
        
        <div class="guide-step">
          <div class="step-number">3</div>
          <div class="step-content">
            <h3>查看检测结果</h3>
            <p>系统将显示详细的检测结果，包括置信度和技术分析</p>
          </div>
        </div>
        
        <div class="guide-step">
          <div class="step-number">4</div>
          <div class="step-content">
            <h3>导出或分享结果</h3>
            <p>您可以导出检测报告或分享检测结果供他人参考</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const activeTab = ref('image')
const textContent = ref('')
const imagePreview = ref('')
const audioFile = ref(null)
const audioPreview = ref('')
const audioDuration = ref('')
const audioDurationInSeconds = ref(0)
const videoFile = ref(null)
const videoPreview = ref('')
const videoDuration = ref('')

// 模型选择
const selectedImageModel = ref('advanced')
const selectedTextModel = ref('gpt-detector')
const selectedAudioModel = ref('voice-ai-v2')
const selectedVideoModel = ref('deepfake-v3')

// 可选模型列表
const imageModels = [
  { 
    id: 'basic', 
    name: 'AI-Image-Detector Basic', 
    description: '基础检测模型，速度快',
    accuracy: '85%',
    speed: '快'
  },
  { 
    id: 'advanced', 
    name: 'AI-Image-Detector Advanced', 
    description: '高级检测模型，准确率高',
    accuracy: '96%',
    speed: '中等'
  },
  { 
    id: 'professional', 
    name: 'AI-Image-Detector Pro', 
    description: '专业级检测模型，支持多种生成技术',
    accuracy: '98%',
    speed: '慢'
  }
]

const textModels = [
  { 
    id: 'gpt-detector', 
    name: 'GPT-Detector v2.1', 
    description: '专门检测GPT系列模型生成的文本',
    accuracy: '89%',
    speed: '快'
  },
  { 
    id: 'multi-llm', 
    name: 'Multi-LLM Detector', 
    description: '检测多种大语言模型生成的文本',
    accuracy: '92%',
    speed: '中等'
  },
  { 
    id: 'advanced-nlp', 
    name: 'Advanced NLP Detector', 
    description: '基于深度学习的高级文本检测',
    accuracy: '94%',
    speed: '慢'
  }
]

const audioModels = [
  { 
    id: 'voice-ai-v2', 
    name: 'Voice-AI-Detector v2.5', 
    description: '检测AI语音合成和语音克隆',
    accuracy: '90%',
    speed: '快'
  },
  { 
    id: 'deepvoice', 
    name: 'DeepVoice Detector', 
    description: '专业语音伪造检测系统',
    accuracy: '94%',
    speed: '中等'
  },
  { 
    id: 'voice-forensic', 
    name: 'Voice Forensic Pro', 
    description: '法医级语音鉴定系统',
    accuracy: '97%',
    speed: '慢'
  }
]

const videoModels = [
  { 
    id: 'deepfake-v3', 
    name: 'Deepfake-Detector v3.0', 
    description: '检测Deepfake和AI生成视频',
    accuracy: '92%',
    speed: '快'
  },
  { 
    id: 'face-forensic', 
    name: 'Face Forensic++', 
    description: '高级面部伪造检测系统',
    accuracy: '96%',
    speed: '中等'
  },
  { 
    id: 'video-ai-pro', 
    name: 'Video-AI-Detector Pro', 
    description: '专业级视频内容检测',
    accuracy: '98%',
    speed: '慢'
  }
]

// 检测结果
const imageResult = ref(null)
const textResult = ref(null)
const videoResult = ref(null)
const audioResult = ref(null)

// 检测状态
const isDetecting = ref(false)
const detectionProgress = ref(0)
const currentDetectionStep = ref('')
const detectionSteps = ref([])

// 上传文件信息
const uploadedImageFile = ref(null)
const uploadedVideoFile = ref(null)
const uploadedAudioFile = ref(null)

// 统计数据
const totalDetections = ref(12847)
const aiDetectedCount = ref(4521)
const humanCreatedCount = ref(8326)
const averageAccuracy = ref(93.2)

// 检测标签页
const detectionTabs = [
  { id: 'image', label: '图像检测', icon: '🖼️' },
  { id: 'text', label: '文本检测', icon: '📝' },
  { id: 'audio', label: '音频检测', icon: '🎵' },
  { id: 'video', label: '视频检测', icon: '🎥' }
]

// 最新检测记录
const recentDetections = ref([
  {
    id: 1,
    time: '2024-01-15 14:30',
    type: 'image',
    content: '风景照片.jpg',
    result: 'ai',
    confidence: 92
  },
  {
    id: 2,
    time: '2024-01-15 14:25',
    type: 'text',
    content: '关于人工智能的文章...',
    result: 'human',
    confidence: 78
  },
  {
    id: 3,
    time: '2024-01-15 14:20',
    type: 'audio',
    content: '语音消息.wav',
    result: 'ai',
    confidence: 88
  },
  {
    id: 4,
    time: '2024-01-15 14:15',
    type: 'image',
    content: '人物头像.png',
    result: 'ai',
    confidence: 95
  },
  {
    id: 5,
    time: '2024-01-15 14:10',
    type: 'text',
    content: '产品描述文本...',
    result: 'human',
    confidence: 82
  }
])

// 计算属性
const getWordCount = computed(() => {
  return (text) => {
    if (!text) return 0
    return text.trim().split(/\s+/).filter(word => word.length > 0).length
  }
})

// 过滤有效的检测记录
const filteredRecentDetections = computed(() => {
  return recentDetections.value.filter(detection => detection != null)
})

// 方法
const switchTab = (tabId) => {
  activeTab.value = tabId
}

// 获取选择的模型信息
const getSelectedModel = (type) => {
  const modelLists = {
    image: imageModels,
    text: textModels,
    audio: audioModels,
    video: videoModels
  }
  
  const selectedIds = {
    image: selectedImageModel.value,
    text: selectedTextModel.value,
    audio: selectedAudioModel.value,
    video: selectedVideoModel.value
  }
  
  return modelLists[type].find(model => model.id === selectedIds[type])
}

const handleImageDrop = (e) => {
  e.preventDefault()
  const files = e.dataTransfer.files
  if (files.length > 0) {
    processImageFile(files[0])
  }
}

const handleImageUpload = (e) => {
  const file = e.target.files[0]
  if (file) {
    processImageFile(file)
  }
}

const processImageFile = (file) => {
  uploadedImageFile.value = file
  const reader = new FileReader()
  reader.onload = (e) => {
    imagePreview.value = e.target.result
  }
  reader.readAsDataURL(file)
}

const handleAudioUpload = (e) => {
  const file = e.target.files[0]
  if (file) {
    audioFile.value = file
    uploadedAudioFile.value = file
    const reader = new FileReader()
    reader.onload = (e) => {
      audioPreview.value = e.target.result
    }
    reader.readAsDataURL(file)
    
    // 获取音频时长
    const audio = new Audio()
    audio.onloadedmetadata = () => {
      audioDurationInSeconds.value = audio.duration // 存储实际秒数
      audioDuration.value = formatDuration(audio.duration) // 存储格式化时间
    }
    audio.src = URL.createObjectURL(file)
  }
}

const handleVideoUpload = (e) => {
  const file = e.target.files[0]
  if (file) {
    videoFile.value = file
    uploadedVideoFile.value = file
    const reader = new FileReader()
    reader.onload = (e) => {
      videoPreview.value = e.target.result
    }
    reader.readAsDataURL(file)
    
    // 模拟获取视频时长
    const video = document.createElement('video')
    video.onloadedmetadata = () => {
      videoDuration.value = formatDuration(video.duration)
    }
    video.src = URL.createObjectURL(file)
  }
}

// 设置检测步骤
const setupDetectionSteps = (type) => {
  const steps = {
    text: [
      { id: 1, name: '文本预处理', description: '清理和标准化文本内容' },
      { id: 2, name: '语言模型分析', description: '分析文本的语言特征' },
      { id: 3, name: '语义理解', description: '理解文本的语义结构' },
      { id: 4, name: '特征提取', description: '提取AI生成的特征模式' },
      { id: 5, name: '结果判断', description: '生成最终检测结果' }
    ],
    image: [
      { id: 1, name: '图像加载', description: '读取和解析图像文件' },
      { id: 2, name: '像素分析', description: '分析图像的像素分布' },
      { id: 3, name: '特征识别', description: '识别AI生成的视觉特征' },
      { id: 4, name: '深度学习推理', description: '运行神经网络模型' },
      { id: 5, name: '置信度计算', description: '计算检测结果的可信度' }
    ],
    audio: [
      { id: 1, name: '音频解码', description: '解析音频文件格式' },
      { id: 2, name: '频谱分析', description: '分析音频的频率特征' },
      { id: 3, name: '声学特征提取', description: '提取语音的声学参数' },
      { id: 4, name: 'AI模型检测', description: '运行语音检测模型' },
      { id: 5, name: '生成概率评估', description: '评估AI生成的概率' }
    ],
    video: [
      { id: 1, name: '视频解码', description: '解析视频文件和帧数据' },
      { id: 2, name: '关键帧提取', description: '提取关键帧进行分析' },
      { id: 3, name: '面部检测', description: '检测和分析面部区域' },
      { id: 4, name: 'Deepfake检测', description: '运行深度伪造检测算法' },
      { id: 5, name: '综合评估', description: '综合所有帧的检测结果' }
    ]
  }
  
  detectionSteps.value = steps[type] || []
}

// 执行检测步骤
const executeDetectionSteps = async () => {
  const totalSteps = detectionSteps.value.length
  let completedSteps = 0
  
  for (const step of detectionSteps.value) {
    currentDetectionStep.value = step.name
    
    // 模拟步骤执行时间
    const stepDuration = Math.random() * 1000 + 800 // 800-1800ms
    await new Promise(resolve => setTimeout(resolve, stepDuration))
    
    completedSteps++
    detectionProgress.value = Math.round((completedSteps / totalSteps) * 100)
  }
  
  currentDetectionStep.value = '检测完成'
}

// 根据内容特征进行检测判断
const performDetection = (type, content) => {
  let isAI = false
  let confidence = 0
  
  switch (type) {
    case 'text':
      // 文本内容长度大于15则为AI生成
      isAI = content.length > 15
      confidence = isAI ? 85 + Math.random() * 10 : 80 + Math.random() * 10
      break
    case 'audio':
      // 音频时长大于5秒则为AI生成
      isAI = content > 5
      confidence = isAI ? 88 + Math.random() * 8 : 75 + Math.random() * 15
      break
    case 'video':
      // 视频文件名长度大于15则为AI生成
      isAI = content.length > 15
      confidence = isAI ? 90 + Math.random() * 8 : 78 + Math.random() * 12
      break
    case 'image':
      // 图像文件名长度大于15则为AI生成
      isAI = content.length > 15
      confidence = isAI ? 92 + Math.random() * 6 : 82 + Math.random() * 10
      break
  }
  
  return {
    isAI,
    confidence: Math.round(confidence),
    result: isAI ? 'AI生成' : '真实内容'
  }
}

const getConfidenceClass = (confidence) => {
  if (confidence >= 80) return 'high'
  if (confidence >= 60) return 'medium'
  return 'low'
}

const getTypeLabel = (type) => {
  const labels = {
    image: '图像',
    text: '文本',
    audio: '音频',
    video: '视频'
  }
  return labels[type] || type
}

const getResultLabel = (result) => {
  const labels = {
    ai: 'AI生成',
    human: '人类创作'
  }
  return labels[result] || result
}

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatDuration = (seconds) => {
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

const viewDetection = (detection) => {
  // 查看检测详情
  console.log('查看检测详情:', detection)
}

// 开始文本检测
const startTextDetection = async () => {
  if (!textContent.value.trim()) return
  
  isDetecting.value = true
  textResult.value = null
  
  // 设置检测步骤
  setupDetectionSteps('text')
  
  // 执行检测步骤
  await executeDetectionSteps()
  
  // 根据文本长度进行检测
  const detection = performDetection('text', textContent.value)
  const selectedModel = getSelectedModel('text')
  
  textResult.value = {
    confidence: detection.confidence,
    model: selectedModel.name,
    style: detection.isAI ? 'AI生成风格' : '人类写作风格',
    complexity: detection.isAI ? '结构化' : '自然化',
    creativity: detection.isAI ? '模式化' : '创新性',
    result: detection.result
  }
  
  // 重置状态
  isDetecting.value = false
  detectionProgress.value = 0
  currentDetectionStep.value = ''
  detectionSteps.value = []
}

// 开始图像检测
const startImageDetection = async () => {
  if (!uploadedImageFile.value) return
  
  isDetecting.value = true
  imageResult.value = null
  
  // 设置检测步骤
  setupDetectionSteps('image')
  
  // 执行检测步骤
  await executeDetectionSteps()
  
  // 根据文件名长度进行检测
  const detection = performDetection('image', uploadedImageFile.value.name)
  const selectedModel = getSelectedModel('image')
  
  imageResult.value = {
    confidence: detection.confidence,
    model: selectedModel.name,
    processingTime: (Math.random() * 2 + 1).toFixed(1) + 's',
    fileSize: formatFileSize(uploadedImageFile.value.size),
    result: detection.result
  }
  
  // 重置状态
  isDetecting.value = false
  detectionProgress.value = 0
  currentDetectionStep.value = ''
  detectionSteps.value = []
}

// 开始音频检测
const startAudioDetection = async () => {
  if (!uploadedAudioFile.value) return
  
  isDetecting.value = true
  audioResult.value = null
  
  // 设置检测步骤
  setupDetectionSteps('audio')
  
  // 执行检测步骤
  await executeDetectionSteps()
  
  // 根据音频时长进行检测
  const detection = performDetection('audio', audioDurationInSeconds.value)
  const selectedModel = getSelectedModel('audio')
  
  audioResult.value = {
    confidence: detection.confidence,
    model: selectedModel.name,
    processingTime: (Math.random() * 3 + 2).toFixed(1) + 's',
    voiceType: detection.isAI ? 'AI合成语音' : '自然人声',
    quality: Math.floor(Math.random() * 20) + 80 + '%',
    result: detection.result
  }
  
  // 重置状态
  isDetecting.value = false
  detectionProgress.value = 0
  currentDetectionStep.value = ''
  detectionSteps.value = []
}

// 开始视频检测
const startVideoDetection = async () => {
  if (!uploadedVideoFile.value) return
  
  isDetecting.value = true
  videoResult.value = null
  
  // 设置检测步骤
  setupDetectionSteps('video')
  
  // 执行检测步骤
  await executeDetectionSteps()
  
  // 根据文件名长度进行检测
  const detection = performDetection('video', uploadedVideoFile.value.name)
  const selectedModel = getSelectedModel('video')
  
  videoResult.value = {
    confidence: detection.confidence,
    model: selectedModel.name,
    processingTime: (Math.random() * 5 + 3).toFixed(1) + 's',
    framesAnalyzed: Math.floor(Math.random() * 300) + 200,
    result: detection.result
  }
  
  // 重置状态
  isDetecting.value = false
  detectionProgress.value = 0
  currentDetectionStep.value = ''
  detectionSteps.value = []
}

// 生命周期
onMounted(() => {
  // 初始化
})
</script>

<style scoped>
.ai-content-detection {
  padding: 20px;
  background: #f8f9fa;
  min-height: 100vh;
  max-width: 1600px;
  margin: 0 auto;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .ai-content-detection {
    width: 90%;
  }
}

@media (max-width: 1200px) {
  .ai-content-detection {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .ai-content-detection {
    width: 100%;
    padding: 10px;
  }
  
  .detection-progress {
    padding: 16px;
  }
  
  .progress-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .progress-header h4 {
    font-size: 16px;
  }
  
  .progress-percentage {
    font-size: 14px;
  }
  
  .progress-steps {
    gap: 12px;
  }
  
  .step-item {
    padding: 8px 12px;
  }
  
  .step-name {
    font-size: 13px;
  }
  
  .step-desc {
    font-size: 11px;
  }
  
  .detect-btn {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  .conclusion-badge {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .result-title-section {
    gap: 8px;
  }
  
  .result-title-section h3 {
    font-size: 16px;
  }
  
  .result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 2.5em;
  color: #1e3c72;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 1.1em;
}

.overview-section {
  margin-bottom: 40px;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.overview-card {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-5px);
}

.overview-icon {
  font-size: 3em;
  margin-bottom: 15px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: inline-block;
}

.overview-card h3 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.overview-card p {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

.overview-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.stat-label {
  color: #666;
  font-size: 0.9em;
}

/* 检测按钮样式 */
.detection-controls {
  margin: 20px 0;
  text-align: center;
}

.detect-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.detect-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.detect-btn:active {
  transform: translateY(0);
}

/* 检测进度样式 */
.detection-progress {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 24px;
  margin: 24px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.progress-header h4 {
  margin: 0;
  color: #1e3c72;
  font-size: 18px;
  font-weight: 600;
}

.progress-percentage {
  font-size: 16px;
  font-weight: 700;
  color: #28a745;
  background: rgba(40, 167, 69, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 24px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.3s ease;
}

.progress-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.step-item.completed {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.step-item.active {
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  transform: translateX(4px);
}

.step-item.pending {
  background: rgba(108, 117, 125, 0.05);
  border: 1px solid rgba(108, 117, 125, 0.2);
  opacity: 0.7;
}

.step-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 600;
}

.step-item.completed .step-indicator {
  background: #28a745;
  color: white;
}

.step-item.active .step-indicator {
  background: #667eea;
  color: white;
}

.step-item.pending .step-indicator {
  background: #e9ecef;
  border: 2px solid #dee2e6;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6c757d;
}

.step-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.step-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-name {
  font-size: 14px;
  font-weight: 600;
  color: #495057;
}

.step-desc {
  font-size: 12px;
  color: #6c757d;
  line-height: 1.4;
}

/* 结论徽章样式 */
.result-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.result-title-section h3 {
  margin: 0;
  font-size: 18px;
  color: #1e3c72;
}

.result-conclusion {
  margin: 0;
}

.conclusion-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.conclusion-badge.ai-generated {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.conclusion-badge.human-created {
  background: linear-gradient(135deg, #2ed573, #1dd1a1);
  color: white;
  box-shadow: 0 2px 8px rgba(46, 213, 115, 0.3);
}

/* 结果头部样式 */
.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9ecef;
  flex-wrap: wrap;
  gap: 12px;
}

.stat-value {
  color: #1e3c72;
  font-weight: bold;
  font-size: 1.1em;
}

.quick-detection-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 40px;
}

.quick-detection-section h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.detection-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-btn {
  padding: 10px 20px;
  border: 2px solid #e0e0e0;
  background: white;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-btn:hover {
  border-color: #1e3c72;
}

.tab-btn.active {
  background: #1e3c72;
  color: white;
  border-color: #1e3c72;
}

.detection-panel {
  min-height: 300px;
}

.model-selector {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.model-selector h3 {
  color: #1e3c72;
  margin-bottom: 15px;
  font-size: 1.2em;
}

.model-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.model-option {
  padding: 15px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
}

.model-option:hover {
  border-color: #1e3c72;
  background: #f8f9fa;
}

.model-option.active {
  border-color: #1e3c72;
  background: #e3f2fd;
}

.model-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.model-name {
  font-weight: 500;
  color: #1e3c72;
}

.model-stats {
  display: flex;
  gap: 15px;
}

.model-stats .accuracy {
  background: #e8f5e8;
  color: #2e7d32;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 500;
}

.model-stats .speed {
  background: #fff3e0;
  color: #f57c00;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 500;
}

.model-description {
  color: #666;
  font-size: 0.9em;
  margin: 0;
  line-height: 1.4;
}

.upload-area {
  border: 2px dashed #ddd;
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: #1e3c72;
  background: #f8f9fa;
}

.upload-icon {
  font-size: 3em;
  margin-bottom: 15px;
}

.upload-area p {
  color: #666;
  margin-bottom: 20px;
}

.upload-btn {
  padding: 10px 30px;
  background: #1e3c72;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.upload-btn:hover {
  background: #2a4a8a;
}

.preview-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.preview-image {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.detection-result {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.result-header h3 {
  color: #1e3c72;
  margin: 0;
}

.confidence-score {
  display: flex;
  align-items: center;
  gap: 10px;
}

.score-label {
  color: #666;
}

.score-value {
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
}

.score-value.high {
  background: #ffebee;
  color: #c62828;
}

.score-value.medium {
  background: #fff3e0;
  color: #ef6c00;
}

.score-value.low {
  background: #e8f5e8;
  color: #2e7d32;
}

.result-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
}

.detail-item .label {
  color: #666;
  font-weight: 500;
}

.detail-item .value {
  color: #333;
}

.text-input-area {
  margin-bottom: 20px;
}

.text-input {
  width: 100%;
  height: 200px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
}

.text-stats {
  margin-top: 10px;
  color: #666;
  font-size: 0.9em;
  display: flex;
  gap: 20px;
}

.text-result {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
}

.result-analysis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.analysis-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.analysis-label {
  color: #666;
  font-size: 0.9em;
}

.analysis-value {
  color: #333;
  font-weight: 500;
}

.audio-upload-area {
  text-align: center;
  padding: 40px;
  border: 2px dashed #ddd;
  border-radius: 10px;
  margin-bottom: 20px;
}

.audio-preview {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
}

.audio-preview .audio-player {
  width: 100%;
  margin-bottom: 15px;
}



.audio-info {
  margin-bottom: 20px;
}

.audio-info p {
  margin: 5px 0;
  color: #666;
}

.audio-result {
  margin-top: 20px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.video-upload-area {
  text-align: center;
  padding: 40px;
  border: 2px dashed #ddd;
  border-radius: 10px;
  margin-bottom: 20px;
}

.video-upload-area .upload-hint {
  color: #888;
  font-size: 0.9em;
  margin-top: 5px;
}

.video-preview {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
}

.video-player {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
}

.video-info {
  margin-bottom: 20px;
}

.video-info p {
  margin: 5px 0;
  color: #666;
}

.video-result {
  margin-top: 20px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.statistics-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 40px;
}

.statistics-section h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  font-size: 2em;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
}

.stat-content h3 {
  color: #1e3c72;
  margin: 0;
  font-size: 1.8em;
}

.stat-content p {
  color: #666;
  margin: 5px 0 0 0;
}

.recent-detections-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 40px;
}

.recent-detections-section h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.detections-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.table-header {
  display: grid;
  grid-template-columns: 120px 80px 200px 100px 80px 80px;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  font-weight: 500;
  color: #333;
}

.table-row {
  display: grid;
  grid-template-columns: 120px 80px 200px 100px 80px 80px;
  gap: 15px;
  padding: 15px;
  background: white;
  border: 1px solid #eee;
  border-radius: 8px;
  align-items: center;
}

.table-row:hover {
  background: #f8f9fa;
}

.time {
  color: #666;
  font-size: 0.9em;
}

.type-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 500;
}

.type-badge.image {
  background: #e3f2fd;
  color: #1976d2;
}

.type-badge.text {
  background: #f3e5f5;
  color: #7b1fa2;
}

.type-badge.audio {
  background: #e8f5e8;
  color: #388e3c;
}

.type-badge.video {
  background: #fff3e0;
  color: #f57c00;
}

.content {
  color: #333;
  font-size: 0.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 500;
}

.result-badge.ai {
  background: #ffebee;
  color: #c62828;
}

.result-badge.human {
  background: #e8f5e8;
  color: #2e7d32;
}

.confidence {
  color: #666;
  font-weight: 500;
}

.action-btn {
  padding: 6px 12px;
  background: #1e3c72;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.action-btn:hover {
  background: #2a4a8a;
}

.technology-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 40px;
}

.technology-section h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.tech-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.tech-icon {
  font-size: 2.5em;
  margin-bottom: 15px;
}

.tech-card h3 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.tech-card p {
  color: #666;
  line-height: 1.5;
}

.guide-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.guide-section h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.guide-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.guide-step {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.step-number {
  width: 40px;
  height: 40px;
  background: #1e3c72;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2em;
}

.step-content h3 {
  color: #1e3c72;
  margin: 0 0 10px 0;
}

.step-content p {
  color: #666;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .tech-grid {
    grid-template-columns: 1fr;
  }
  
  .preview-section {
    grid-template-columns: 1fr;
  }
  
  .table-header, .table-row {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .guide-step {
    flex-direction: column;
    text-align: center;
  }
  
  .model-stats {
    flex-direction: column;
    gap: 5px;
  }
  
  .model-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style> 